<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0; margin:0;}
        .all{
            width:400px; height:350px; background: red;
            /* padding-top:50px; */
            border:solid 2px red;     
        }
        .box{
            width:200px; height:200px;background: yellow;
            margin-top:50px;
        }

        /* 
            margin的bug
                当给子元素添加margin-top值，错误的加给了父元素
                    解决方法：
                        1，给父元素添加overflow:hidden;(推荐)
                        2，给父元素添加float:left;（不推荐使用）
                        3, 给父元素用padding
                        4, 给父元素添加border 
            */
    </style>
</head>
<body>
   <div class="all">
       <div class="box"></div>
   </div> 
</body>
</html>